<template>
  <div class="cart-list">
    <ul class="list" v-if="products.length > 0">
      <li
        v-for="(item, index) in  products"
        :key="index"
        class="list-item"
      >
        <template v-if="item.product">
          <div class="checkbox">
            <span><cube-checkbox
              :option="{label: ''}"
              v-model="item.selected"
              @input="changeSelected(item)"
            ></cube-checkbox></span>
          </div>
          <div class="image"
               @click="$router.push(`/product/detail/${item.product.id}`)"
               v-if="item.product.mainImage"
          >
            <img v-lazy="item.product.mainImage.thumbnail_path" />
          </div>
          <div class="desc">
            <p class="area">[ {{ item.areaName }} ]</p>
            <p class="title two-lines">{{ item.product.title }}</p>
            <p v-if="false" class="sku two-lines">{{ item.product.title_sub }}</p>
            <p class="sku">{{ JSON.parse(item.selected_sku_text) }}</p>
            <p class="price" v-if="!item.sku">￥{{ +item.product.price }}</p>
            <p class="price" v-else>
              积分:{{ +item.sku.price }} + ￥{{ +item.score_cost }}
            </p>
            <num class="num" :item="item" />
          </div>
        </template>
      </li>
    </ul>
    <ul class="list nothing" v-else>
      <li>您还没有添加任何商品到购物车</li>
      <li class="look" @click="$router.push('/')">去逛逛</li>
    </ul>
  </div>
</template>

<script>
import Num from './Num'
export default {
  name: 'CartList',
  components: { Num },
  props: {
    products: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    // change selected
    changeSelected(item) {
      this.$emit('changeItemSelected', item)
    }
  }
}
</script>

<style scoped lang="stylus">
.cart-list
  //top 45px
  //bottom 90px
  //position fixed
  //z-index 1
  //overflow-y auto
  //width 100%
  .list
    margin 10px
    padding-bottom 50px
    &.nothing
      padding-top 30px
      .look
        margin 20px
        background $main_color
        display inline-block
        padding 5px 20px
        border-radius 10px
        color white
    .list-item
      margin-bottom 10px
      background white
      border-radius 10px
      padding 10px 0
      display flex
      .checkbox
        font-size 20px
        width 45px
        position relative
        span
          position absolute
          left 0
          top calc(50% - 20px)
      .image
        width 100px
        box-sizing border-box
        padding 10px
      .desc
        flex 1
        margin-right 5px
        text-align left
        //background red
        position relative
        .area
          //background red
          height 35px
          line-height 35px
          color $main_color
          font-weight 700
        .title
          line-height 20px
          font-size 14px
          font-weight 700
        .sku
          height 20px
          line-height 20px
        .price
          height 35px
          line-height 35px
          font-weight 700
          font-size 14px
          color red
          //position absolute
          //bottom 5px
          //left 0
        .num
          position absolute
          right 5px
          bottom 5px
</style>
